// import { useSelector, useDispatch } from "react-redux"
// import { Button, DatePicker } from "antd"
// const { RangePicker } = DatePicker;
// import { useIntl } from "react-intl"

// export default (props) => {
//   const intl = useIntl();
//   const { size } = useSelector(state => state.app)
//   const dispatch = useDispatch();
//   return (
//     <div>
//       <h2>{intl.formatMessage({ id: "good.list.title" })}</h2>
//       <RangePicker></RangePicker>
//       <Button type="primary">点我</Button>
//     </div>
//   )
// }

// ---------------------------------------------------

// import { useSelector, useDispatch } from "react-redux"
// import { Button, DatePicker } from "antd"
// const { RangePicker } = DatePicker;
// import { useIntl, FormattedMessage } from "react-intl"

// export default (props) => {
//   const intl = useIntl();
//   const { size } = useSelector(state => state.app)
//   const dispatch = useDispatch();
//   return (
//     <div>
//       <h2>
//         <FormattedMessage id="good.list.title"></FormattedMessage>
//       </h2>
//       <RangePicker></RangePicker>
//       <Button type="primary">点我</Button>
//     </div>
//   )
// }

// ---------------------------------------------

import { Button, DatePicker, Row, Col, Input, Table } from "antd"
import CateSelect from "./components/CateSelect"
import { PlusOutlined, ReloadOutlined, ColumnHeightOutlined, SettingOutlined } from "@ant-design/icons"
const { RangePicker } = DatePicker
import { useIntl, FormattedMessage } from "react-intl"

import "./style.scss"

const columns = [
  {
    title: '商品',
    align: 'center',
    dataIndex: 'name',
    render: (text) => {
      return (
        <div className="good">
          <img src={`https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg`} alt="" />
          <div>{text}</div>
        </div>
      )
    },
  },
  {
    title: '价格',
    dataIndex: 'price',
    align: 'center',
    render: text => (
      <div>{`￥${Number(text).toFixed(2)}`}</div>
    )
  },
  {
    title: '品类',
    dataIndex: 'cate',
    align: 'center',
    render: cate => {
      return (
        <div>手机</div>
      )
    }
  },
  {
    title: '是否热销',
    dataIndex: 'hot',
    align: 'center',
    render: text => (
      <div>{text ? '是' : '否'}</div>
    )
  },
  {
    title: '状态',
    dataIndex: 'store_status',
    align: 'center',
    render: text => (
      <div>{text ? '已上架' : '待上架'}</div>
    )
  },
  {
    title: '发布时间',
    dataIndex: 'create_time',
    align: 'center',
    render: text => {
      return (
        <>
          <div>{text}</div>
        </>
      )
    }
  },
  {
    title: '操作',
    align: 'center',
    render: (_, row) => (
      <>
        <Button
          type='primary'
          size='small'
        >
          编辑
        </Button>
        <Button danger size='small' style={{ marginLeft: '10px' }}>删除</Button>
      </>
    )
  }
]

const data = [
  {
    key: '1',
    name: '小米手机',
    price: 32,
    cate: '手机',
    hot: true,
    store_status: true,
    create_time: "20220202"
  },
];

export default (props) => {
  const intl = useIntl();
  return (
    <div className="good-list">
      <div className="filter">
        <Row justify="center" align="middle">
          <Col span={3}>
            <span>商品名称：</span>
          </Col>
          <Col span={4}>
            <Input />
          </Col>
          <Col span={3}>
            <span>商品分类：</span>
          </Col>
          <Col span={4}>
            <CateSelect />
          </Col>
        </Row>
      </div>
      <div className="table">
        <Table
          rowSelection={{
            type: "checkbox",
            onChange: (keys, rows) => {
              console.log(keys, rows);
            }
          }}
          columns={columns}
          dataSource={data}
          title={() => (
            <Row>
              <Col span={4}>商品列表</Col>
              <Col span={6} offset={14} style={{ textAlign: "right" }}>
                <Button type="primary" icon={<PlusOutlined />}>新增</Button>
                <div className="table-title">
                  <ReloadOutlined />
                  <ColumnHeightOutlined />
                  <SettingOutlined />
                </div>
              </Col>
            </Row>
          )}
          pagination={{
            total: 30,
            showSizeChanger: true,
            showTitle: (total) => `Total ${total} items`
          }}
        />;
      </div>
    </div>
  )
}